import React from "react";
import { useLocation } from "react-router-dom";
import MyTick from "../../component/MyTick";
import { NavBar, Tag, List } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import MyNavTime from "../../component/MyNavTime";
import styles from "./index.module.css";
function Index() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state);
  // const navigate=useNavigate()
  const handleToOrder = (price, leavSeat) => {
    navigate(`/order?price=${price}&leavSeat=${leavSeat}`, { state: state });
  };

  const ticklist = ["商务座", "二等座", "三等座"];
  const tickprice = [
    state.tick.vip,
    state.tick.firstTick,
    state.tick.secondTick,
  ];
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>车票详情页</NavBar>
      <MyNavTime state={state}></MyNavTime>
      <MyTick state={state}></MyTick>

      <div className={styles.seatXuan}>
        <List>
          {ticklist.map((item, ind) => (
            <List.Item
              prefix={item}
              key={ind}
              extra={
                <Tag
                  onClick={() => handleToOrder(tickprice[ind], item)}
                  color="warning"
                >
                  购票
                </Tag>
              }
            >
              <span>￥{tickprice[ind]}元</span>
            </List.Item>
          ))}

          {/* <List.Item prefix={"二等座"} extra={<Tag onClick={()=>handleToOrder()} color="warning">购票</Tag>}>
            <span>￥{state.tick.firstTick}元</span>
          </List.Item>
          <List.Item prefix={"三等座"} extra={<Tag onClick={()=>handleToOrder()} color="warning">购票</Tag>}>
            <span>￥{state.tick.secondTick}元</span>
          </List.Item> */}
        </List>
      </div>
    </div>
  );
}

export default Index;
